#Event Handling

### 1. Programatically (Recommended Approach)
````javascript
args.setPromise(WinJS.UI.processAll().then(function () {
    var button1 = document.getElementById("button1");
    button1.addEventListener("click", button1Click, false);
    })
);
````
### Example 1

You can add the new event listener inside of a ready state when a page loads.  Here's an example including a Page control/Navigation.

````
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                // ----------------------------------- Add Event Listener
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, false);
                // ------------------------------------------------------
                })
            );
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
    // ---------------------------------------------Define EventHandler
    // The click event handler for button1
    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }
    // ------------------------------------------------------

    app.start();
})();
````


### Example 2

````javascript
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

        }
    });
})();
````

````html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BasicAppExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- BasicAppExample references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="button1">An HTML button</button>
    <p id="button1Output"></p>
</body>
</html>
````

### 2. Making a member function publicly accessible

Another approach is to make the function publicly accessible - meaning you can choose to apply this in HTML by making reference to a JavaScript function via an onclick attribute on...basically anything.  But again this is **NOT** the recommended approach.

````javascript
var namespacePublicMembers = { clickEventHandler: button1Click };
WinJS.Namespace.define("startPage", namespacePublicMembers);
````

````html
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
````